<template>
    <div class="zui" >
      <div class="box">
     <div class="top">
      <div class="one">
        <p>客户信息</p>
      </div>
      <div class="two">
   
    <el-tabs
      v-model="activeName"
      type="border"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="基本信息" name="first">
  
        <!-- 基本信息内容 -->
       <div class="ji">
        基本信息
       </div>
      
      </el-tab-pane>
      <el-tab-pane label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;资产负债表" name="second">
  
        <!-- 资产负债表 -->
        <div class="body">
        <div class="top">
            <h3>资产负债表</h3>
            <p>2019年12月31日</p>   
        </div>
        <div class="zhong" >
            <div class="left">
            <div class="aa">项目</div>
            <div class="bb">行次</div>
            <div class="cc">年末金额</div>
            <div class="dd">年初金额</div>
            </div>
            <div class="right">
             <div class="aa">项目</div>
            <div class="bb">行次</div>
            <div class="cc">年末金额</div>
            <div class="dd">年初金额</div>
            </div>

        </div>    
        <div class="button" >
            <div class="left" >
           
                <el-table 
                :data="zichan"
                style="width: 100%"
                border
                  >
                <el-table-column prop="xiangmu" label="项目" width="260" />
                  <el-table-column prop="hangshu" label="行数" width="40" />
                  <el-table-column prop="nianmo" label="年末金额" />
                  <el-table-column prop="nianchu" label="年初金额" />
                </el-table>
            </div>
            <div class="right" >

            </div>
        </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="利润表" name="third">
        <!-- 利润表内容 -->
        <div class="ji">
        基本信息
       </div>
    
      </el-tab-pane>
      <el-tab-pane label="现金流量表" name="fourth">
        <!-- 现金流量表内容 -->
        <div class="ji">
        基本信息
       </div>
    
   
      </el-tab-pane>
      <el-tab-pane label="股东信息" name="1">
        <!-- 股东管理内容 -->
        <div class="gudong">
            <div class="top">
            <div class="one">股东信息</div>
            <el-button class="two">+新增</el-button>
            </div>
           <div class="button1">
            <div class="weiba">
            <el-table class="tou" :data="Parameters" stripe style="width:100%; " >
          <el-table-column prop="entShareholderid" label="序号">
          <template #default="scope">
            
          </template>
        </el-table-column>
        <el-table-column prop="entEntname" label="股东名册">
          <template #default="scope">

          </template>
        </el-table-column>
        <el-table-column prop="entCreditcode" label="股东类型">
          <template #default="scope">
           
          </template>
        </el-table-column>
        <el-table-column prop="entEntloantotal" label="证件类型">
         
        </el-table-column>
        <el-table-column prop="caCreditpermsgtext" label="证件号码">
         
        </el-table-column>
        <el-table-column prop="" label="持股份额">
         
        </el-table-column>
        <el-table-column prop="" label="持股比例">
          
        </el-table-column>
        <el-table-column prop="" label="操作">
         
          <template #default="scope" >
            <el-button type="danger" @click="gudongshan(scope.row.entShareholderid)" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
        </div>
           </div>
            
        </div>
        <div class="gubutton">
           
        </div>
      </el-tab-pane>
      <el-tab-pane label="管理团队" name="2">
        <!-- 管理团队内容 -->
        <div class="guanli">
            <div class="top">
            <div class="one">管理团队</div>
            <el-button class="two">+新增</el-button>
            </div>
           <div class="button1">
            <div class="weiba">
            <el-table class="tou" :data="tableData" stripe style="width:100%; " >
          <el-table-column prop="entManageteamid" label="序号">
          <template #default="scope">
            
          </template>
        </el-table-column>
        <el-table-column prop="entEntname" label="姓名">
          <template #default="scope">

          </template>
        </el-table-column>
        <el-table-column prop="entCreditcode" label="性别">
          <template #default="scope">
           
          </template>
        </el-table-column>
        <el-table-column prop="entEntloantotal" label="职务">
         
        </el-table-column>
        <el-table-column prop="caCreditpermsgtext" label="证件类型">
         
        </el-table-column>
        <el-table-column prop="" label="证件号码">
         
        </el-table-column>
        <el-table-column prop="" label="是否董事会成员">
          
        </el-table-column>
        <el-table-column prop="" label="联系方式">
          
        </el-table-column>
        <el-table-column prop="" label="备注">
          
        </el-table-column>
        <el-table-column prop="" label="操作">
         
          <template #default="scope" >
            <el-button type="danger" @click="guanli(scope.row.entManageteamid)" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
        </div>
           </div>
            
        </div>
      </el-tab-pane>
      <el-tab-pane label="银行账户信息" name="3">
        <!-- 银行账户信息 -->
        <div class="yinghangz">
            <div class="top">
            <div class="one">银行账户信息</div>
            <el-button class="two">+新增</el-button>
            </div>
           <div class="button1">
            <div class="weiba">
            <el-table class="tou" :data="yinghang" stripe style="width:100%; " >
          <el-table-column prop="htContractid" label="序号">
          <template #default="scope">
            
          </template>
        </el-table-column>
        <el-table-column prop="entEntname" label="姓名">
          <template #default="scope">

          </template>
        </el-table-column>
        <el-table-column prop="entCreditcode" label="性别">
          <template #default="scope">
           
          </template>
        </el-table-column>
        <el-table-column prop="entEntloantotal" label="职务">
         
        </el-table-column>
        <el-table-column prop="caCreditpermsgtext" label="证件类型">
         
        </el-table-column>
        <el-table-column prop="" label="证件号码">
         
        </el-table-column>
        <el-table-column prop="" label="是否董事会成员">
          
        </el-table-column>
        <el-table-column prop="" label="联系方式">
          
        </el-table-column>
        <el-table-column prop="" label="备注">
          
        </el-table-column>
        <el-table-column prop="" label="操作">
         
          <template #default="scope" >
            <el-button type="danger" @click="yinhangs(scope.row.htContractid)" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
        </div>
           </div>
            
        </div>
    
      </el-tab-pane>
      <el-tab-pane label="企业信用概括" name="4">
        <!-- 企业信用概括 -->
        <div class="xingyong">
            <div class="top">
            <div class="one">企业信用概括</div>
            <el-button class="two">+新增</el-button>
            </div>
           <div class="button1">
            <div class="weiba">
            <el-table class="tou" :data="xingyong" stripe style="width:100%; " >
          <el-table-column prop="caCreditresultid" label="序号">
          <template #default="scope">
            
          </template>
        </el-table-column>
        <el-table-column prop="entEntname" label="用信机构">
          <template #default="scope">

          </template>
        </el-table-column>
        <el-table-column prop="entCreditcode" label="用信品种">
          <template #default="scope">
           
          </template>
        </el-table-column>
        <el-table-column prop="entEntloantotal" label="用信余额（）">
         
        </el-table-column>
        <el-table-column prop="caCreditpermsgtext" label="舆情情况">
         
        </el-table-column>
        <el-table-column prop="" label="担保方式">
         
        </el-table-column>
       
        <el-table-column prop="" label="操作">
         
          <template #default="scope" >
            <el-button type="danger" @click="xingyongs(scope.row.caCreditresultid)" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
        </div>
           </div>
            
        </div>
    
      </el-tab-pane>
      <el-tab-pane label="涉诉信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" name="5">
        <!-- 诉讼信息 -->
        <div class="sheshu">
            <div class="top">
            <div class="one">涉诉信息</div>
            <el-button class="two">+新增</el-button>
            </div>
           <div class="button1">
            <div class="weiba">
            <el-table class="tou" :data="sheshu" stripe style="width:100%; " >
          <el-table-column prop="entComplaintsinfoid" label="序号">
          <template #default="scope">
            
          </template>
        </el-table-column>
        <el-table-column prop="entEntname" label="立案时间">
          <template #default="scope">

          </template>
        </el-table-column>
        <el-table-column prop="entCreditcode" label="立案原因">
          <template #default="scope">
           
          </template>
        </el-table-column>
        <el-table-column prop="entEntloantotal" label="余额（）">
         
        </el-table-column>
        <el-table-column prop="caCreditpermsgtext" label="角色">
         
        </el-table-column>
        <el-table-column prop="" label="录入人">
         
        </el-table-column>
        <el-table-column prop="" label="录入时间">
         
        </el-table-column>
        <el-table-column prop="" label="执行状态">
         
        </el-table-column>
       
        <el-table-column prop="" label="操作">
         
          <template #default="scope" >
            <el-button type="danger" @click="sheshus(scope.row.entComplaintsinfoid)" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
        </div>
           </div>
            
        </div>
   
         </el-tab-pane>
         
    </el-tabs>
      </div>
     </div>
     <div class="button">
      <el-button>保存</el-button>
      <el-button>提交</el-button>
      <el-button @click="tui">返回</el-button>
     </div>
    </div>
    </div>
    
  </template>
  
  <script lang="ts" setup>
 import {Delete} from '@element-plus/icons-vue'
  import type { TabsPaneContext } from 'element-plus'
  import { reactive } from 'vue'
  import {useRouter} from 'vue-router'
  import { onMounted, ref } from 'vue'
  import serviceAxios from '@/apis/index'
  import { ElNotification } from 'element-plus'
  var router = useRouter();
  //基本信息
  const input2 = ref('')
  
  
  // do not use same name with ref
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })
  
  const activeName = ref('first')
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    
  }
//客户信息列表

// onMounted( 
//   async() => {
//     var res = await serviceAxios.gjc.My_entInfo();
  
//     tableData.value = res.data.data
//     console.log(res.data.data);
  
  
//   })
//资产负债表
const zichan = [
{
    xiangmu: '流动资产',
    hangshu: '1',
    nianmo: '1999',
    nianchu: '9111',
  },
    
{
    xiangmu: '流动资产',
    hangshu: '1',
    nianmo: '1999',
    nianchu: '9111',
  },
    
{
    xiangmu: '流动资产',
    hangshu: '1',
    nianmo: '1999',
    nianchu: '9111',
  },
    
{
    xiangmu: '流动资产',
    hangshu: '1',
    nianmo: '1999',
    nianchu: '9111',
  },
    
]
  var tui =()=>{
    router.push('/home/upandown/upandowna');
  }



/* 股东管理内容 */
//股东信息
const Parameters = ref();
onMounted( 
  async() => {
    var res = await serviceAxios.gjc.My_entShareholder();
  
    Parameters.value = res.data.data
    
  })
  //删除股东
  var gudongshan=async(entShareholderid:any)=>{
var res = await serviceAxios.gjc.My_entShareholdershan({id:entShareholderid});

var res = await serviceAxios.gjc.My_entShareholder();

Parameters.value = res.data.data
  }





//管理团队
const tableData = ref();
onMounted( 
  async() => {
    var res = await serviceAxios.gjc.My_entManageteam();
  
    tableData.value = res.data.data
    // console.log(res.data.data);
  })
  var guanli =async(entManageteamid:any)=>{
      var res = await serviceAxios.gjc.My_entManageteamshan({id:entManageteamid});
      var res = await serviceAxios.gjc.My_entManageteam();
  
  tableData.value = res.data.data
  }
  //银行账户信息
  var yinghang = ref();
  onMounted( 
  async() => {
    var res = await serviceAxios.gjc.My_htBankinfo();
  
    yinghang.value = res.data.data
    // console.log(res.data.data);
  })
  var yinhangs =async(htContractid:any)=>{
      var res = await serviceAxios.gjc.My_htBankinfoshan({id:htContractid});
      var res = await serviceAxios.gjc.My_htBankinfo();
  
      yinghang.value = res.data.data
  }
  
  //企业信用概括
  var xingyong = ref();
onMounted( 
  async() => {
    var res = await serviceAxios.gjc.My_caCreditresult();
  
    xingyong.value = res.data.data
    // console.log(res.data.data);
  })
  var xingyongs =async(caCreditresultid:any)=>{
      var res = await serviceAxios.gjc.My_caCreditresultshan({id:caCreditresultid});
      var res = await serviceAxios.gjc.My_caCreditresult();
  
      xingyong.value = res.data.data
  }

//企业涉诉信息
var sheshu = ref();
onMounted( 
  async() => {
    var res = await serviceAxios.gjc.My_entComplaintsinfo();
  
    sheshu.value = res.data.data
    
  })
  var sheshus =async(entComplaintsinfoid:any)=>{
      var res = await serviceAxios.gjc.My_entComplaintsinfoshan({id:entComplaintsinfoid});
      var res = await serviceAxios.gjc.My_entComplaintsinfo();
  
      sheshu.value = res.data.data
  }


  </script>
  
  <style scoped>
  .zui{
    width: 100%;
    height: 90%;
  
  }
  .box{
    width: 80%;
    height: 90%;
    background-color: white;
    margin: auto;
  }
  
  :deep(.el-tabs__item) {
    width: 100px;
    height: 28px;
  }
  :deep(.el-tabs__nav-wrap::after){
    height: 0px;
  }
  :deep(.el-tabs__item.is-active) {
    color:white ;
    background-color: rgb(78, 171, 254);
    text-align: center;
    border-radius: 5px;
    
  }
  :deep(.el-tabs__item ){
    text-align: center;
    margin: auto;
    width: 100px;
    font-size: 10px;
    font-weight: bolder;
  }
  :deep(.el-tabs__nav ){
    width:1000px;
    margin-left: 10px;
  }
  :deep(.el-table--border th.el-table__cell){
    display: none;
  }
  .wei{
      width: 80%;
      margin: auto;
      font-size: 12px;
  }
  
  .wei .zi{
    font-size: 16px;
    line-height: 32px;
    margin-left: -50px;
  
  }
  .wei{
    display: flex;
  }
  .wei .el-button{
    margin-left: 50px;
  }
  .ji{
    font-size: 12px;
    margin-bottom: 10px;
  }
  .fa{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
  }
  .wei{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    margin-left: 50px;
  }
  .wei .zi{
    font-size: 12px;
    
  }
  .wei .el-button{
    height: 25px;
    width: 50px;
    line-height: 30px;
    border: 1px solid blue;
    color: blue;
    margin-top: 3px;
  }
  .button{
    width: 100%;
    display: flex;
    z-index: 20;
    background-color: white;
    justify-content: flex-end
  }
   .button .el-button{
    border: 1px solid gray;
    width: 120px;
  }
  .top .body{
    overflow-y: auto;
    width: 100%;
    height: 400px;
  }
  :deep(.el-tabs__nav-next){
    line-height: 31px;
    position: absolute;
    font-size: 32px;
    color: blue;
    width: 20px;
    text-align: center;
    z-index: 3;
}
 :deep(.el-tabs__nav-prev) {
    line-height: 31px;
    position: absolute;
    font-size: 32px;
    color: blue;
    width: 25px;
    text-align: center;
}
.body .top{
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    text-align: center;
}
.body .top h3{
    font-size: 14px;
}
.body .top p{
    font-size: 12px;
    margin-top: -5px;
}
.body .button {
    display: flex;

}
.body .zhong {
    display: flex;
    font-size: 12px;
      height: 20px;
      justify-content: space-around;
}

.body .zhong .left{
      width: 50%;
      display: flex;
}
.body .zhong .right{
      width: 50%;
      display: flex;
}
.body .zhong .aa{
   margin-left: 125px;
   
   
}
.body .zhong .bb{
      margin-left: 118px;
}
.body .zhong .cc{
      margin-left: 23px;
}
.body .zhong .dd{
      margin-left: 30px;
}
.body .button .left{
    width: 50%;
    height: 100px;
  
}
.body .button .right{
    width: 50%;
   
    height: 100px;
   
}

/* 股东管理内容 */
.gudong .top {
      display: flex;
      align-items: center;
}
.gudong .top .two{
      margin-left: 30px;
}
.guanli .top {
      display: flex;
      align-items: center;
}
.guanli .top .two{
      margin-left: 30px;
}
.yinghangz .top {
      display: flex;
      align-items: center;
}
.yinghangz .top .two{
      margin-left: 30px;
}
.xingyong .top {
      display: flex;
      align-items: center;
}
.xingyong .top .two{
      margin-left: 30px;
}
.sheshu .top {
      display: flex;
      align-items: center;
}
.sheshu .top .two{
      margin-left: 30px;
}
  </style>